<template>
  <custom-container ref="customContainerRef" :config="mainConfig" />
  <setForm ref="setFormRef" @changeList="handleQuery" />
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, defineAsyncComponent, computed } from 'vue'
import { Delete, Refresh, Plus, Download, Edit, Document } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElButton } from 'element-plus'
import { getFuelList, delFuelList } from '@/api/BusinessConfig/fuelMaintain'

const setForm = defineAsyncComponent(() => import('./components/setForm.vue'))
const customContainerRef = ref(null),
  setFormRef = ref(null),
  // 查询
  queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    fuelCode: undefined,
    status: undefined,
  })

// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1
  customContainerRef.value.getList()
}
// 新增
const handleAdd = () => {
  setFormRef.value.open = true
  setFormRef.value.isEdit = '新增数据'
}
// 修改
const handleUpdate = (row: { [key: string]: any }) => {
  setFormRef.value.open = true
  setFormRef.value.isEdit = '修改数据'
  const rowList = JSON.parse(JSON.stringify(row))
  console.log(rowList)
  setFormRef.value.form = rowList
  console.log(rowList)
}
// 删除
const handleDelete = (row: { [key: string]: any }) => {
  ElMessageBox.confirm(`是否确认删除用户编号为"${ row.id }"的数据项?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => delFuelList(row.id))
  .then((res) => {
    if (res.code === 200) {
      console.log('ss')
      handleQuery()
      ElMessage.success('删除成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
  .catch((error) => {
    if (error == 'cancel') {
      ElMessage.error(error)
    }
  })
}
const mainConfig = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '编码',
            prop: 'fuelCode',
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            option: {
              dictInfo: {
                dict: [
                  {
                    label: '生效',
                    value: 0,
                    id: 0,
                  },
                  {
                    label: '失效',
                    value: 1,
                    id: 1,
                  },
                  {
                    label: '草稿',
                    value: 2,
                    id: 2,
                  },
                ],
                dictValue: 'value',
                dictLabel: 'label',
              },
            },
          },
          {
            label: '燃油种类中文',
            prop: 'fuelTypeChinese',
          },
        ],
        queryParams: queryParams.value,
      },
      btns: [
        {
          title: '新增',
          icon: Plus,
          text: true,
          type: 'primary',
          onClick: handleAdd,
        },
      ],
      table: {
        columns: [
          {
            label: '编码',
            prop: 'fuelCode',
            align: 'center',
            minWidth: '90',
          },
          {
            label: '状态',
            prop: 'status',
            align: 'center',
            minWidth: '90',
            formatter(row: { [key: string]: any }) {
              if (row.status === 0) {
                return '生效'
              } if (row.status === 1) {
                return '失效'
              } if (row.status === 2) {
                return '草稿'
              }
            },
          },
          {
            label: '生效时间',
            prop: 'effectiveDate',
            align: 'center',
            minWidth: '90',
          },
          {
            label: '失效时间',
            prop: 'expirationDate',
            align: 'center',
            minWidth: '90',
          },
          {
            label: '燃油种类中文',
            prop: 'fuelTypeChinese',
            align: 'center',
            minWidth: '90',
          },
          {
            label: '燃油种类英文',
            prop: 'fuelTypeEnglish',
            align: 'center',
            minWidth: '90',
          },
          {
            label: '燃油系数',
            prop: 'fuelCoefficient',
            align: 'center',
            minWidth: '90',
          },
          {
            label: '创建人',
            prop: 'creator',
            align: 'center',
            minWidth: '90',
          },
          {
            label: '创建时间',
            prop: 'createDate',
            align: 'center',
            minWidth: '90',
          },
          {
            label: '修改人',
            prop: 'modifiter',
            align: 'center',
            minWidth: '90',
          },
          {
            label: '修改时间',
            prop: 'modificationDate',
            align: 'center',
            minWidth: '90',
          },
          {
            label: '操作',
            align: 'center',
            showOverflowTooltip: false,
            render: (h, params) => {
              const buttons = [
                {
                  title: '编辑',
                  icon: Edit,
                  clickFun: handleUpdate,
                },
                {
                  title: '删除',
                  icon: Delete,
                  clickFun: handleDelete,
                },
              ]
              return buttons.map((el) => h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  icon: el.icon,
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              ))
            },
          },
        ],
      },
      api: getFuelList,
    }
  },
  set(val) {
    return val
  },
})
</script>
